<template>
    <div class="footer">
        <el-button v-for="(item, index) in data" :key="index" @click="flyTo(item)">{{ item.name }}</el-button>
    </div>

</template>
<script setup lang="ts">
import { ref } from 'vue';

import { getobjm } from '../scripts/getobjm';
const objm = getobjm();
const data = ref([
    {
        name: "钢筋加工场",
        view: {
            "position": [
                114.24760209208598,
                22.764161830304076,
                86.14013116282905
            ],
            "rotation": [
                12.352714538574219,
                -31.34966278076172,
                3.724267073256177e-15
            ]
        },
    }, {
        name: "预制区",
        view: {
            "position": [
                114.2457488309035,
                22.76521172688161,
                109.78347589362863
            ],
            "rotation": [
                86.2684555053711,
                -30.887413024902344,
                0.000020352254068711773
            ]
        },
    }, {
        name: "修饰区",
        view: {
            "position": [
                114.24551156434153,
                22.76600309454319,
                112.00867361171595
            ],
            "rotation": [
                96.05912780761719,
                -31.6936092376709,
                4.672505316993434e-16
            ]
        },
    }, {
        name: "存粮区",
        view: {
            "position": [
                114.24489771526494,
                22.76662121082086,
                112.17234718839738
            ],
            "rotation": [
                96.05870819091797,
                -31.69403839111328,
                0.000026411884391563945
            ]
        },
    }

])


/**
 * 飞行定位
 * @param item 
 */
const flyTo = (item: any) => {
    if (!item.view) return
    const { position, rotation } = item.view
    objm.activeViewer?.flyIn(position, rotation, 2)
}

</script>
<style scoped>
.footer {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}
</style>